<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多功能文本编辑器 - 任务1完成版</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f5f5f5;
            height: 100vh;
            overflow: hidden;
        }
        
        .editor-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            background: white;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        
        .editor-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .editor-title {
            font-size: 1.5em;
            font-weight: 600;
        }
        
        .editor-status {
            display: flex;
            gap: 20px;
            font-size: 0.9em;
            opacity: 0.9;
        }
        
        .status-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #4CAF50;
        }
        
        .status-indicator.saving {
            background: #FF9800;
            animation: pulse 1s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .toolbar {
            background: #fafafa;
            border-bottom: 1px solid #e0e0e0;
            padding: 10px 20px;
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .toolbar-group {
            display: flex;
            gap: 5px;
            align-items: center;
            padding-right: 15px;
            border-right: 1px solid #e0e0e0;
        }
        
        .toolbar-group:last-child {
            border-right: none;
        }
        
        .toolbar-btn {
            padding: 8px 12px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .toolbar-btn:hover {
            background: #f0f0f0;
            border-color: #ccc;
        }
        
        .toolbar-btn.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }
        
        .toolbar-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .toolbar-select {
            padding: 6px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: white;
            font-size: 14px;
            cursor: pointer;
        }
        
        .editor-main {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        
        .editor-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        .editor-workspace {
            flex: 1;
            position: relative;
            overflow: hidden;
        }
        
        .editor-textarea {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            padding: 20px;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.6;
            resize: none;
            background: white;
        }
        
        .editor-footer {
            background: #f5f5f5;
            border-top: 1px solid #e0e0e0;
            padding: 8px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #666;
        }
        
        .footer-left {
            display: flex;
            gap: 20px;
        }
        
        .footer-right {
            display: flex;
            gap: 20px;
        }
        
        .context-menu {
            position: fixed;
            background: white;
            border: 1px solid #ddd;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 1000;
            min-width: 150px;
            padding: 5px 0;
        }
        
        .context-menu-item {
            padding: 8px 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            transition: background 0.2s ease;
        }
        
        .context-menu-item:hover {
            background: #f0f0f0;
        }
        
        .context-menu-item.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .context-menu-divider {
            height: 1px;
            background: #e0e0e0;
            margin: 5px 0;
        }
        
        .shortcut {
            margin-left: auto;
            font-size: 12px;
            color: #999;
        }
        
        .search-replace {
            position: absolute;
            top: 10px;
            right: 10px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 15px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 500;
            min-width: 300px;
        }
        
        .search-input {
            width: 100%;
            padding: 6px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .search-actions {
            display: flex;
            gap: 5px;
            justify-content: flex-end;
        }
        
        .search-btn {
            padding: 4px 8px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .search-btn:hover {
            background: #f0f0f0;
        }
        
        .drag-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(102, 126, 234, 0.1);
            border: 2px dashed #667eea;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2em;
            color: #667eea;
            font-weight: 600;
            z-index: 1000;
        }
        
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #4CAF50;
            color: white;
            padding: 12px 20px;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 3000;
            animation: slideInRight 0.3s ease;
        }
        
        .toast.error {
            background: #f44336;
        }
        
        .toast.warning {
            background: #ff9800;
        }
        
        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(100%);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        /* 任务完成提示样式 */
        .task-completed {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            border-radius: 4px;
            padding: 10px;
            margin: 10px;
            font-size: 12px;
            color: #155724;
        }
        
        .task-completed strong {
            color: #0f5132;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="editor-container">
            <!-- 编辑器头部 -->
            <div class="editor-header">
                <div class="editor-title">多功能文本编辑器 - 任务1完成版</div>
                <div class="editor-status">
                    <div class="status-item">
                        <div class="status-indicator" :class="{ saving: isSaving }"></div>
                        <span>{{ saveStatus }}</span>
                    </div>
                    <div class="status-item">
                        <span>{{ currentTime }}</span>
                    </div>
                </div>
            </div>
            
            <!-- 工具栏 -->
            <div class="toolbar">
                <div class="toolbar-group">
                    <!-- 任务1: 工具栏按钮点击事件 - 已完成 -->
                    <div class="task-completed">
                        <strong>任务1已完成:</strong> 工具栏按钮点击事件处理
                    </div>
                    <button class="toolbar-btn" @click="newFile" title="新建文件 (Ctrl+N)">
                        📄 新建
                    </button>
                    <button class="toolbar-btn" @click="openFile" title="打开文件 (Ctrl+O)">
                        📁 打开
                    </button>
                    <button class="toolbar-btn" @click="saveFile" title="保存文件 (Ctrl+S)">
                        💾 保存
                    </button>
                    <button class="toolbar-btn" @click="saveAsFile" title="另存为 (Ctrl+Shift+S)">
                        📋 另存为
                    </button>
                </div>
                
                <div class="toolbar-group">
                    <!-- 任务2: 添加撤销/重做按钮的事件和状态控制 -->
                    <button class="toolbar-btn" title="撤销 (Ctrl+Z)">
                        ↶ 撤销
                    </button>
                    <button class="toolbar-btn" title="重做 (Ctrl+Y)">
                        ↷ 重做
                    </button>
                </div>
                
                <div class="toolbar-group">
                    <!-- 任务3: 完成编辑操作按钮 -->
                    <button class="toolbar-btn" title="剪切 (Ctrl+X)">
                        ✂️ 剪切
                    </button>
                    <button class="toolbar-btn" title="复制 (Ctrl+C)">
                        📋 复制
                    </button>
                    <button class="toolbar-btn" title="粘贴 (Ctrl+V)">
                        📌 粘贴
                    </button>
                </div>
                
                <div class="toolbar-group">
                    <button class="toolbar-btn" title="查找替换 (Ctrl+F)">
                        🔍 查找
                    </button>
                    <button class="toolbar-btn" title="全选 (Ctrl+A)">
                        📝 全选
                    </button>
                </div>
                
                <div class="toolbar-group">
                    <!-- 任务4: 添加下拉选择器的事件处理 -->
                    <select class="toolbar-select">
                        <option value="12">12px</option>
                        <option value="14" selected>14px</option>
                        <option value="16">16px</option>
                        <option value="18">18px</option>
                        <option value="20">20px</option>
                        <option value="24">24px</option>
                    </select>
                    
                    <select class="toolbar-select">
                        <option value="Consolas" selected>Consolas</option>
                        <option value="Monaco">Monaco</option>
                        <option value="Courier New">Courier New</option>
                        <option value="Arial">Arial</option>
                        <option value="Times New Roman">Times New Roman</option>
                    </select>
                </div>
                
                <div class="toolbar-group">
                    <button class="toolbar-btn" title="自动换行">
                        📄 换行
                    </button>
                    <button class="toolbar-btn" title="全屏模式 (F11)">
                        🔲 全屏
                    </button>
                </div>
            </div>
            
            <!-- 主要内容区域 -->
            <div class="editor-main">
                <!-- 编辑器内容 -->
                <div class="editor-content">
                    <!-- 编辑器工作区 -->
                    <div class="editor-workspace">
                        <!-- 拖拽覆盖层 -->
                        <div v-if="isDragging" class="drag-overlay">
                            📁 拖拽文件到这里打开
                        </div>
                        
                        <!-- 文本编辑区 -->
                        <textarea 
                            ref="textarea"
                            class="editor-textarea"
                            v-model="content"
                            placeholder="任务1完成！文件操作功能已实现。

✅ 已完成功能：
- 新建文件：清空编辑器内容
- 打开文件：选择本地文件并读取内容
- 保存文件：下载当前内容为txt文件
- 另存为：自定义文件名并下载

🎯 测试方法：
1. 点击'新建'按钮 - 内容应该清空
2. 点击'打开'按钮 - 弹出文件选择对话框
3. 点击'保存'按钮 - 下载document.txt文件
4. 点击'另存为'按钮 - 提示输入文件名并下载

💡 技术要点：
- Vue 3 @click事件绑定
- FileReader API读取文件
- Blob API创建文件数据
- URL.createObjectURL()创建下载链接
- 用户交互：confirm()和prompt()对话框

继续完成其他任务以实现更多功能！"
                            spellcheck="false"
                        ></textarea>
                        
                        <!-- 查找替换面板 -->
                        <div v-if="showSearchPanel" class="search-replace">
                            <input 
                                v-model="searchText" 
                                class="search-input" 
                                placeholder="查找内容"
                            >
                            <input 
                                v-model="replaceText" 
                                class="search-input" 
                                placeholder="替换为"
                            >
                            <div class="search-actions">
                                <button class="search-btn">上一个</button>
                                <button class="search-btn">下一个</button>
                                <button class="search-btn">替换</button>
                                <button class="search-btn">全部替换</button>
                                <button class="search-btn">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 状态栏 -->
            <div class="editor-footer">
                <div class="footer-left">
                    <span>行 {{ cursorPosition.line }}, 列 {{ cursorPosition.column }}</span>
                    <span>选中 {{ selectionLength }} 个字符</span>
                    <span>编码: UTF-8</span>
                </div>
                <div class="footer-right">
                    <span>Plain Text</span>
                    <span>字符数: {{ content.length }}</span>
                </div>
            </div>
        </div>
        
        <!-- 右键菜单 -->
        <div v-if="contextMenu.show" class="context-menu" :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }">
            <div class="context-menu-item">
                <span>撤销</span>
                <span class="shortcut">Ctrl+Z</span>
            </div>
            <div class="context-menu-item">
                <span>重做</span>
                <span class="shortcut">Ctrl+Y</span>
            </div>
            <div class="context-menu-divider"></div>
            <div class="context-menu-item">
                <span>剪切</span>
                <span class="shortcut">Ctrl+X</span>
            </div>
            <div class="context-menu-item">
                <span>复制</span>
                <span class="shortcut">Ctrl+C</span>
            </div>
            <div class="context-menu-item">
                <span>粘贴</span>
                <span class="shortcut">Ctrl+V</span>
            </div>
            <div class="context-menu-divider"></div>
            <div class="context-menu-item">
                <span>全选</span>
                <span class="shortcut">Ctrl+A</span>
            </div>
            <div class="context-menu-item">
                <span>查找替换</span>
                <span class="shortcut">Ctrl+F</span>
            </div>
        </div>
        
        <!-- 提示消息 -->
        <div v-if="toast.show" class="toast" :class="toast.type">
            {{ toast.message }}
        </div>
    </div>
    
    <script>
        const { createApp, ref, reactive, computed, onMounted, nextTick } = Vue;
        
        createApp({
            setup() {
                // 基础状态
                const textarea = ref(null);
                const content = ref('任务1完成！文件操作功能已实现。\n\n✅ 已完成功能：\n- 新建文件：清空编辑器内容\n- 打开文件：选择本地文件并读取内容\n- 保存文件：下载当前内容为txt文件\n- 另存为：自定义文件名并下载\n\n🎯 测试方法：\n1. 点击\'新建\'按钮 - 内容应该清空\n2. 点击\'打开\'按钮 - 弹出文件选择对话框\n3. 点击\'保存\'按钮 - 下载document.txt文件\n4. 点击\'另存为\'按钮 - 提示输入文件名并下载\n\n💡 技术要点：\n- Vue 3 @click事件绑定\n- FileReader API读取文件\n- Blob API创建文件数据\n- URL.createObjectURL()创建下载链接\n- 用户交互：confirm()和prompt()对话框\n\n继续完成其他任务以实现更多功能！');
                const showSearchPanel = ref(false);
                const isDragging = ref(false);
                const isSaving = ref(false);
                
                // 编辑器设置
                const fontSize = ref(14);
                const fontFamily = ref('Consolas');
                
                // 光标位置
                const cursorPosition = ref({ line: 1, column: 1 });
                const selectionLength = ref(0);
                
                // 搜索替换
                const searchText = ref('');
                const replaceText = ref('');
                
                // 当前时间
                const currentTime = ref('');
                
                // 保存状态
                const saveStatus = computed(() => {
                    if (isSaving.value) return '保存中...';
                    return '任务1完成';
                });
                
                // 右键菜单
                const contextMenu = reactive({
                    show: false,
                    x: 0,
                    y: 0
                });
                
                // 提示消息
                const toast = reactive({
                    show: false,
                    type: 'success',
                    message: ''
                });
                
                // 更新时间
                const updateTime = () => {
                    const now = new Date();
                    currentTime.value = now.toLocaleTimeString();
                };
                
                // 显示提示消息
                const showToast = (message, type = 'success') => {
                    toast.message = message;
                    toast.type = type;
                    toast.show = true;
                    setTimeout(() => {
                        toast.show = false;
                    }, 3000);
                };
                
                // ==========================================
                // 任务1: 文件操作函数 - 已完成实现
                // ==========================================
                
                // 新建文件
                const newFile = () => {
                    if (content.value && content.value.trim() !== '') {
                        if (confirm('当前文件未保存，是否继续新建？')) {
                            content.value = '';
                            showToast('新建文件成功', 'success');
                        }
                    } else {
                        content.value = '';
                        showToast('新建文件成功', 'success');
                    }
                };
                
                // 打开文件
                const openFile = () => {
                    const input = document.createElement('input');
                    input.type = 'file';
                    input.accept = '.txt,.md,.js,.html,.css,.json';
                    input.onchange = (e) => {
                        const file = e.target.files[0];
                        if (file) {
                            const reader = new FileReader();
                            reader.onload = (e) => {
                                content.value = e.target.result;
                                showToast(`文件 "${file.name}" 打开成功`, 'success');
                            };
                            reader.readAsText(file);
                        }
                    };
                    input.click();
                };
                
                // 保存文件
                const saveFile = () => {
                    const blob = new Blob([content.value], { type: 'text/plain' });
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'document.txt';
                    a.click();
                    URL.revokeObjectURL(url);
                    showToast('文件保存成功', 'success');
                };
                
                // 另存为
                const saveAsFile = () => {
                    const filename = prompt('请输入文件名:', 'document.txt');
                    if (filename) {
                        const blob = new Blob([content.value], { type: 'text/plain' });
                        const url = URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = filename;
                        a.click();
                        URL.revokeObjectURL(url);
                        showToast(`文件另存为 "${filename}" 成功`, 'success');
                    }
                };
                
                // ==========================================
                // 其他任务的函数（待完成）
                // ==========================================
                
                const undo = () => {
                    showToast('请完成任务2：撤销功能', 'warning');
                };
                
                const redo = () => {
                    showToast('请完成任务2：重做功能', 'warning');
                };
                
                const cut = () => {
                    showToast('请完成任务3：剪切功能', 'warning');
                };
                
                const copy = () => {
                    showToast('请完成任务3：复制功能', 'warning');
                };
                
                const paste = () => {
                    showToast('请完成任务3：粘贴功能', 'warning');
                };
                
                const selectAll = () => {
                    showToast('请完成任务3：全选功能', 'warning');
                };
                
                const toggleSearch = () => {
                    showToast('请完成任务8：查找面板切换功能', 'warning');
                };
                
                const findNext = () => {
                    showToast('请完成任务8：查找下一个功能', 'warning');
                };
                
                const findPrevious = () => {
                    showToast('请完成任务8：查找上一个功能', 'warning');
                };
                
                const replaceNext = () => {
                    showToast('请完成任务8：替换下一个功能', 'warning');
                };
                
                const replaceAll = () => {
                    showToast('请完成任务8：全部替换功能', 'warning');
                };
                
                const updateFontSize = () => {
                    showToast('请完成任务4：字体大小更新功能', 'warning');
                };
                
                const updateFontFamily = () => {
                    showToast('请完成任务4：字体类型更新功能', 'warning');
                };
                
                const toggleWordWrap = () => {
                    showToast('请完成任务4：自动换行切换功能', 'warning');
                };
                
                const toggleFullscreen = () => {
                    showToast('请完成任务4：全屏切换功能', 'warning');
                };
                
                const handleKeydown = (event) => {
                    console.log('按键事件:', event.key, event.ctrlKey);
                    showToast('请完成任务7：键盘快捷键处理', 'warning');
                };
                
                const handleDrop = (event) => {
                    event.preventDefault();
                    showToast('请完成任务5：文件拖拽功能', 'warning');
                };
                
                const showContextMenu = (event) => {
                    showToast('请完成任务6和9：右键菜单功能', 'warning');
                };
                
                const updateSelection = () => {
                    // 基础实现
                };
                
                // 全局事件监听
                const handleGlobalClick = (event) => {
                    // 基础实现
                };
                
                // 生命周期
                onMounted(() => {
                    // 更新时间
                    updateTime();
                    setInterval(updateTime, 1000);
                    
                    // 添加全局事件监听
                    document.addEventListener('click', handleGlobalClick);
                    
                    // 聚焦到文本区域
                    nextTick(() => {
                        if (textarea.value) {
                            textarea.value.focus();
                        }
                    });
                    
                    // 显示欢迎消息
                    showToast('任务1完成！文件操作功能已实现。', 'success');
                });
                
                // 返回响应式数据和方法
                return {
                    // 引用
                    textarea,
                    
                    // 状态
                    content,
                    showSearchPanel,
                    isDragging,
                    isSaving,
                    
                    // 设置
                    fontSize,
                    fontFamily,
                    
                    // 光标和选择
                    cursorPosition,
                    selectionLength,
                    
                    // 搜索
                    searchText,
                    replaceText,
                    
                    // 状态
                    currentTime,
                    saveStatus,
                    
                    // UI组件
                    contextMenu,
                    toast,
                    
                    // 文件操作 - 任务1已完成
                    newFile,
                    openFile,
                    saveFile,
                    saveAsFile,
                    
                    // 编辑操作
                    undo,
                    redo,
                    cut,
                    copy,
                    paste,
                    selectAll,
                    
                    // 搜索替换
                    toggleSearch,
                    findNext,
                    findPrevious,
                    replaceNext,
                    replaceAll,
                    
                    // 格式设置
                    updateFontSize,
                    updateFontFamily,
                    toggleWordWrap,
                    toggleFullscreen,
                    
                    // 事件处理
                    handleKeydown,
                    handleDrop,
                    showContextMenu,
                    updateSelection
                };
            }
        }).mount('#app');
    </script>
</body>
</html>